<template>
<div class="app-container">
<div class="viewProject">
  <div class="el-card__body">
     <el-card class="box-card" >
      <el-tabs v-model="activeName" @tab-click="handleClick" class="tabs" stretch >
        <el-tab-pane label="项目详情" name="details">
          <chargeIndex  />
        </el-tab-pane>
        <el-tab-pane label="项目报表" name="statement" lazy>
          <report />
        </el-tab-pane>
        <el-tab-pane label="项目资料" name="examine" lazy>
          <projectDetail />
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
  </div>
</div>
  
</template>
<script>
    import chargeIndex from './chargePages/index' //部门主管级页面
    import managerIndex from './managerPages/index' //经理级页面
    import report from '../../warehouse/view/report'
    import projectDetail from '../../warehouse/view/projectInfo'
    export default {
        components:{
            chargeIndex,
            managerIndex,
            report,
            projectDetail
        },
        data() {
            return {
                activeName: 'details'
            };
        },
        methods: {
            handleClick() {
                // console.log(this.activeName);
            }
        }
    };
</script>
<style lang="scss">
  .viewProject{
    // .el-card{
    //   margin: 24px;
    // }
    .el-card__body{
      padding: 0!important;
    }
    .tabs{
      width: 100%;
      .el-tabs__item{
        font-size: 18px;
        color:#333333;
        font-weight: bold;
      }
      .is-active{
        font-weight: 600;
        color: #409EFF;
      }
      .el-tabs__active-bar{
        width: 50%;
        margin: 0 auto;
        background:  #409EFF;
      }
      .el-tabs__content{
        margin: 0px 20px;
        background: #ffffff;
        padding: 10px;
      }
    }
  }

</style>
